/* eslint-disable */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { DropTarget } from 'react-dnd';
import styles from './filt.less';
import VideoPlayer from '../../../components/common/VideoPlayerRTMP/index';
import {Spin} from 'antd';

const style = {
  border: '1px solid #ccc',
  textAlign: 'center',
  fontSize: '1rem',
  lineHeight: 'normal',
};
const header = {
  height:'3vh',
  lineHeight:'3vh',
  backgroundColor:'#283142',
  color:'#fff',
  textAlign:'left',
  paddingLeft:'10px',
  fontSize:'14px',
};

const dustbinTarget = {
  drop(props, monitor) {
    props.onDrop(monitor.getItem())
  },
};

class Dustbin extends Component {
  static propTypes = {
    connectDropTarget: PropTypes.func.isRequired,
    isOver: PropTypes.bool.isRequired,
    canDrop: PropTypes.bool.isRequired,
    didDrop: PropTypes.bool.isRequired,
    accepts: PropTypes.arrayOf(PropTypes.string).isRequired,
    lastDroppedItem: PropTypes.string,
    onDrop: PropTypes.func.isRequired,
  };
  constructor(props) {
    super(props);
    this.state = {
      url:'',
    }
  }
  render() {
    let {accepts,isOver,canDrop,connectDropTarget,lastDroppedItem,open,width,height,video,name,padding,marginTop,controls} = this.props;
    const isActive = isOver && canDrop;
    let backgroundColor = '#001529';
    if (isActive) {
      backgroundColor = '#000c17';
    } else if (canDrop) {
      backgroundColor = '#000c17';
    }
    return connectDropTarget(
      <div style={{marginTop,padding}} className={styles.container}>
        <div style={{ ...style, backgroundColor, width, height }}>
          <div style={{...header,width,}}>
            {lastDroppedItem ? name: ''}
            <span style={{width:'20px',height:'3vh',float:'right',fontSize:'1vw',cursor:'pointer',title:'关闭'}} onClick={this.props.onClose}>×</span>
          </div>
          <Spin style={{lineHeight:height}} spinning={isActive ? true:false}>
          {
            open &&
              <VideoPlayer
                width={width}
                height={video}
                autoplay={true}
                controls={true}
                notSupportedMessage={'您的浏览器没有安装或开启Flash,请检查！'}
                techOrder={ ["html5", "flash"]}
                sources={ [{src: lastDroppedItem, type: 'rtmp/flv'}]}
              />
          }
          </Spin>
        </div>
      </div>,
    )
  }
}

export default DropTarget(props => props.accepts, dustbinTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  canDrop: monitor.canDrop(),
  didDrop:monitor.didDrop(),
}))(Dustbin);
